<!DOCTYPE html>
<html>

<head>
  <script src="../..//node_modules/angular/angular.js"></script>
  <script src="../..//node_modules/angular-animate/angular-animate.js"></script>
  <style>
    .slide-animate-container {
      position: relative;
      background: white;
      border: 1px solid black;
      min-height: 40px;
      overflow: hidden;
    }

    .slide-animate {
      padding: 10px;
    }

    .slide-animate.ng-enter,
    .slide-animate.ng-leave {
      transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      padding: 10px;
    }

    .slide-animate.ng-enter {
      top: -50px;
    }

    .slide-animate.ng-enter.ng-enter-active {
      top: 0;
    }

    .slide-animate.ng-leave {
      top: 0;
    }

    .slide-animate.ng-leave.ng-leave-active {
      top: 50px;
    }
  </style>
</head>

<body ng-app="demo">
  <div ng-controller="DemoController">
    <select ng-model="template" ng-options="t.name for t in templates">
      <option value="">(blank)</option>
    </select>
    url of the template: <code>{{template.url}}</code>
    <hr />
    <div class="slide-animate-container">
      <div class="slide-animate" ng-include="template.url"></div>
    </div>
  </div>
  <script>
    const demo = angular.module('demo', [])
    demo.controller('DemoController', function ($scope) {
      $scope.templates =
        [{ name: 'template1.html', url: 'template1.html' },
        { name: 'template2.html', url: 'template2.html' }];
      $scope.template = $scope.templates[0];
    });
  </script>
</body>

</html>